<template>
  <view class="chat-container">
    <!-- 自定义Header -->
    <CustomHeader></CustomHeader>
    <view class="chat-header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">{{ chatUserName || "聊天" }}</text>
        <view class="header-right">
          <!-- 可以放置更多按钮，暂时留空 -->
        </view>
      </view>
    </view>

    <!-- 聊天消息区域 -->
    <scroll-view 
      class="message-area" 
      scroll-y 
      :scroll-top="scrollTop"
      :scroll-into-view="scrollIntoView"
      scroll-with-animation
    >
      <!-- 消息列表 -->
      <view class="message-list">
        <view 
          class="message-item"
          v-for="message in messageList"
          :key="message.id"
        >
          <!-- 对方消息 -->
          <view v-if="!isMyMessage(message)" class="message-wrapper">
            <!-- 职位卡片消息特殊布局 -->
            <view v-if="message.msgType === 16" class="job-card-message-wrapper">
              <text class="job-card-tip">当前沟通的职位</text>
              <text class="message-time">{{ formatMessageTime(message.createTime) }}</text>
              <view class="job-card" @click="goToJobDetail(message.content.jobId)">
                <view class="job-header">
                  <text class="job-name">{{ message.content.jobName }}</text>
                  <text class="job-salary">{{ formatSalary(message.content) }}</text>
                </view>
                
                <!-- 企业信息 -->
                <view class="company-info">
                  <text class="company-name">{{ message.content.companyName }}</text>
                  <text class="separator">·</text>
                  <text class="company-detail">{{ message.content.financStage }}</text>
                  <text class="separator">·</text>
                  <text class="company-detail">{{ formatPeopleSize(message.content.peopleSize) }}</text>
                </view>
                
                <!-- 岗位性质 -->
                <view class="job-nature">
                  <text class="nature-tag" v-if="message.content.edu">{{ message.content.edu }}</text>
                  <text class="nature-tag" v-if="message.content.expYears">{{ message.content.expYears }}</text>
                  <text class="nature-tag" v-if="message.content.monthlySalary">{{ message.content.monthlySalary }}薪</text>
                </view>
                
                <!-- 标签 -->
                <view class="job-tags" v-if="message.content.tags">
                  <text
                    class="job-tag"
                    v-for="tag in getTopTags(message.content.tags, 5)"
                    :key="tag"
                  >{{ tag }}</text>
                </view>
                
                <!-- HR信息和地址 -->
                <view class="job-footer">
                  <view class="hr-info">
                    <image
                      :src="message.content.face || '/static/images/avatar.png'"
                      class="hr-avatar"
                    ></image>
                    <view class="hr-text">
                      <text class="hr-name">{{ message.content.name || "HR" }}</text>
                      <text class="hr-position">· {{ message.content.position || "" }}</text>
                    </view>
                  </view>
                  <text class="job-city">{{ message.content.city }}</text>
                </view>
              </view>
            </view>
            <!-- 其他消息类型保持原布局 -->
            <template v-else>
              <image 
                class="avatar" 
                :src="'/static/images/avatar.png'"
              />
              <view class="message-content ">
                <!-- 文本消息 -->
                <view v-if="message.msgType === 10" class="message-bubble message-bubble-left">
                  <text class="message-text">{{ message.content.text }}</text>
                </view>
                <!-- 图片消息 -->
                <view v-else-if="message.msgType === 11" class="image-message-wrapper">
                  <image 
                    class="message-image" 
                    :src="message.content.imageUrl"
                    :style="{ width: message.content.width + 'rpx', height: message.content.height + 'rpx' }"
                    @click="previewImage(message.content.imageUrl)"
                    mode="aspectFit"
                  />
                </view>
                <!-- 语音消息 -->
                <view v-else-if="message.msgType === 12" class="voice-message-wrapper">
                  <view class="message-bubble message-bubble-left voice-message">
                    <view class="voice-content">
                      <image class="voice-icon" src="/static/icons/chat/voice.png" />
                      <text class="voice-duration">{{ message.content.duration }}"</text>
                    </view>
                  </view>
                  <image 
                    v-if="!message.content.isRead" 
                    class="unread-dot-outside" 
                    src="/static/icons/chat/unread_voice.png" 
                  />
                </view>
                <!-- 简历附件消息 -->
                <view v-else-if="message.msgType === 17" class="resume-message-wrapper">
                  <view class="resume-attachment" @click="previewResume(message.content)">
                    <image class="resume-icon" :src="getResumeIcon(message.content.fileType)"></image>
                    <view class="resume-details">
                      <text class="resume-name">{{ message.content.fileName }}</text>
                      <text class="resume-size">{{ formatResumeSize(message.content.fileSizeMb) }}</text>
                    </view>
                  </view>
                </view>
                <!-- 面试邀请消息 -->
                <view v-else-if="message.msgType === 14" class="interview-message-wrapper">
                  <view class="interview-card" @click="viewInterviewDetail(message.content.interviewId)">
                    <view class="interview-header">
                      <image class="interview-icon" src="/static/icons/chat/interview.png"></image>
                      <text class="interview-title">面试邀请</text>
                    </view>
                    <text class="interview-desc">对方要求您进行面试</text>
                    <view class="interview-action">
                      <text class="action-text">点击查看详情</text>
                      <image class="action-arrow" src="/static/icons/right-arrow-gray.png"></image>
                    </view>
                  </view>
                </view>
                <text class="message-time">{{ formatMessageTime(message.createTime) }}</text>
              </view>
            </template>
          </view>

          <!-- 我的消息 -->
          <view v-else class="message-wrapper message-right">
            <!-- 职位卡片消息特殊布局 -->
            <view v-if="message.msgType === 16" class="job-card-message-wrapper">
              <text class="job-card-tip">当前沟通的职位</text>
              <text class="message-time">{{ formatMessageTime(message.createTime) }}</text>
              <view class="job-card" @click="goToJobDetail(message.content.jobId)">
                <view class="job-header">
                  <text class="job-name">{{ message.content.jobName }}</text>
                  <text class="job-salary">{{ formatSalary(message.content) }}</text>
                </view>
                
                <!-- 企业信息 -->
                <view class="company-info">
                  <text class="company-name">{{ message.content.companyName }}</text>
                  <text class="separator">·</text>
                  <text class="company-detail">{{ message.content.financStage }}</text>
                  <text class="separator">·</text>
                  <text class="company-detail">{{ formatPeopleSize(message.content.peopleSize) }}</text>
                </view>
                
                <!-- 岗位性质 -->
                <view class="job-nature">
                  <text class="nature-tag" v-if="message.content.edu">{{ message.content.edu }}</text>
                  <text class="nature-tag" v-if="message.content.expYears">{{ message.content.expYears }}</text>
                  <text class="nature-tag" v-if="message.content.monthlySalary">{{ message.content.monthlySalary }}薪</text>
                </view>
                
                <!-- 标签 -->
                <view class="job-tags" v-if="message.content.tags">
                  <text
                    class="job-tag"
                    v-for="tag in getTopTags(message.content.tags, 5)"
                    :key="tag"
                  >{{ tag }}</text>
                </view>
                
                <!-- HR信息和地址 -->
                <view class="job-footer">
                  <view class="hr-info">
                    <image
                      :src="message.content.face || '/static/images/avatar.png'"
                      class="hr-avatar"
                    ></image>
                    <view class="hr-text">
                      <text class="hr-name">{{ message.content.name || "HR" }}</text>
                      <text class="hr-position">· {{ message.content.position || "" }}</text>
                    </view>
                  </view>
                  <text class="job-city">{{ message.content.city }}</text>
                </view>
              </view>
            </view>
            <!-- 其他消息类型保持原布局 -->
            <template v-else>
              <view class="message-content">
                <!-- 文本消息 -->
                <view v-if="message.msgType === 10" class="message-bubble message-bubble-right">
                  <text class="message-text">{{ message.content.text }}</text>
                </view>
                <!-- 图片消息 -->
                <view v-else-if="message.msgType === 11" class="image-message-wrapper image-message-wrapper-right">
                  <image 
                    class="message-image" 
                    :src="message.content.imageUrl"
                    :style="{ width: message.content.width + 'rpx', height: message.content.height + 'rpx' }"
                    @click="previewImage(message.content.imageUrl)"
                    mode="aspectFit"
                  />
                </view>
                <!-- 语音消息 -->
                <view v-else-if="message.msgType === 12" class="voice-message-wrapper voice-message-wrapper-right">
                  <image 
                    v-if="!message.content.isRead" 
                    class="unread-dot-outside" 
                    src="/static/icons/chat/unread_voice.png" 
                  />
                  <view class="message-bubble message-bubble-right voice-message">
                    <view class="voice-content voice-content-right">
                      <text class="voice-duration">{{ message.content.duration }}"</text>
                      <image class="voice-icon" src="/static/icons/chat/voice_right.png" />
                    </view>
                  </view>
                </view>
                <!-- 简历附件消息 -->
                <view v-else-if="message.msgType === 17" class="resume-message-wrapper resume-message-wrapper-right">
                  <view class="resume-attachment" @click="previewResume(message.content)">
                    <image class="resume-icon" :src="getResumeIcon(message.content.fileType)"></image>
                    <view class="resume-details">
                      <text class="resume-name">{{ message.content.fileName }}</text>
                      <text class="resume-size">{{ formatResumeSize(message.content.fileSizeMb) }}</text>
                    </view>
                  </view>
                </view>
                <!-- 面试邀请消息 -->
                <view v-else-if="message.msgType === 14" class="interview-message-wrapper interview-message-wrapper-right">
                  <view class="interview-card" @click="viewInterviewDetail(message.content.interviewId)">
                    <view class="interview-header">
                      <image class="interview-icon" src="/static/icons/chat/interview.png"></image>
                      <text class="interview-title">面试邀请</text>
                    </view>
                    <text class="interview-desc">您邀请了对方进行面试</text>
                    <view class="interview-action">
                      <text class="action-text">点击查看详情</text>
                      <image class="action-arrow" src="/static/icons/right-arrow-gray.png"></image>
                    </view>
                  </view>
                </view>
                <text class="message-time">{{ formatMessageTime(message.createTime) }}</text>
              </view>
              <image 
                class="avatar" 
                :src="'/static/images/avatar.png'"
              />
            </template>
          </view>
        </view>
      </view>

      <!-- 占位区域，防止消息被输入框遮挡 -->
      <view class="message-placeholder" id="message-bottom"></view>
    </scroll-view>

    <!-- 录音遮罩层 -->
    <view v-if="isRecording" class="recording-mask">
      <view class="recording-content" :class="{ 'cancel-state': isRecordingCancel }">
        <view class="recording-icon-wrapper">
          <image 
            v-if="!isRecordingCancel" 
            class="recording-icon" 
            src="/static/icons/chat/voice.png"
          ></image>
          <image 
            v-else 
            class="recording-icon cancel-icon" 
            src="/static/icons/chat/close.png"
          ></image>
        </view>
        <text class="recording-text">{{ isRecordingCancel ? '松开取消发送' : '松开发送，上滑取消' }}</text>
        <text class="recording-time">{{ recordingTime }}"</text>
      </view>
    </view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <view class="input-wrapper">
        <!-- 语音输入按钮 -->
        <view class="voice-btn" @click="toggleVoiceInput">
          <image 
            class="input-icon" 
            :src="isVoiceMode ? '/static/icons/chat/voice.png' : '/static/icons/chat/keyboard.png'"
          />
        </view>

        <!-- 文字输入框 -->
        <view class="text-input-wrapper" v-show="!isVoiceMode">
          <input 
            class="text-input"
            type="text"
            v-model="inputText"
            :placeholder="inputPlaceholder"
            placeholder-class="input-placeholder"
            @focus="onInputFocus"
            @blur="onInputBlur"
            @confirm="sendMessage"
          />
        </view>

        <!-- 语音输入按钮（长按录音） -->
        <view 
          class="voice-input-btn" 
          :class="{ 'recording': isRecording }"
          v-show="isVoiceMode"
          @touchstart="startRecord"
          @touchmove="onRecordMove"
          @touchend="endRecord"
          @touchcancel="cancelRecord"
        >
          <text class="voice-text">{{ voiceButtonText }}</text>
        </view>

        <!-- 右侧按钮组 -->
        <view class="right-buttons">
          <!-- 表情按钮 -->
          <view class="emoji-btn" @click="toggleEmoji">
            <image class="input-icon" src="/static/icons/chat/expression.png" />
          </view>

          <!-- 发送按钮或更多按钮 -->
          <view v-if="inputText.trim()" class="send-btn" @click="sendMessage">
            <text class="send-text">发送</text>
          </view>
          <view v-else class="more-btn" @click="showMore">
            <image class="input-icon" src="/static/icons/chat/more.png" />
          </view>
        </view>
      </view>

      <!-- 表情面板 -->
      <view class="emoji-panel" v-show="showEmojiPanel">
        <view class="emoji-grid">
          <view 
            class="emoji-item"
            v-for="(emoji, index) in emojiList"
            :key="index"
            @click="selectEmoji(emoji)"
          >
            <text class="emoji-text">{{ emoji }}</text>
          </view>
        </view>
      </view>

      <!-- 更多面板 - 求职者版本 -->
      <view class="more-panel" v-show="showMorePanel">
        <view class="more-grid">
          <view class="more-item" @click="selectImage">
            <image class="more-icon" src="/static/icons/chat/pic_send.png" />
            <text class="more-text">图片</text>
          </view>
          <view class="more-item" @click="selectResume">
            <image class="more-icon" src="/static/icons/chat/resume_send.png" />
            <text class="more-text">简历</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CustomHeader from "@/components/CustomHeader.vue";
import { createCandidateChatSessionApi } from "@/api/chat.js";
import { useChatStore } from "../../stores/modules/chat";

export default {
  components: {
    CustomHeader,
  },
  data() {
    return {
      chatStore: null, // Initialize chat store reference
      chatUserName: "", // 聊天对象昵称
      sessionId: "", // 会话ID
      jobId: "", // 职位ID
      hrId: "", // HR ID
      inputText: "", // 输入框文字
      inputPlaceholder: "对ta发送消息",
      isVoiceMode: false, // 是否为语音模式
      showEmojiPanel: false, // 显示表情面板
      showMorePanel: false, // 显示更多面板
      scrollTop: 0, // 滚动位置
      scrollIntoView: "", // 滚动到指定元素
      voiceButtonText: "按住 说话", // 语音按钮文字
      isRecording: false, // 是否正在录音
      isRecordingCancel: false, // 是否处于取消录音状态
      recordingTime: 0, // 录音时长（秒）
      recordingTimer: null, // 录音计时器
      recordStartY: 0, // 录音开始时的Y坐标
      
      // 消息列表（模拟数据）
      messageList: [
        {
          id: "695494127097217024",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971773007435702273",
          msgType: 10,
          content: {
            text: "你好，我看了您的简历，很符合我们的要求"
          },
          createTime: 1758957926556
        },
        {
          id: "695494127097217025",
          sessionId: "1971803632909803521", 
          senderId: "1971803632909803521", // 这是我发送的消息
          receiveId: "1957428994103259137",
          msgType: 10,
          content: {
            text: "谢谢您的关注，请问这个职位的具体要求是什么？"
          },
          createTime: 1758957986556
        },
        {
          id: "695494127097217026",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971803632909803521",
          msgType: 10,
          content: {
            text: "主要负责前端开发，需要熟悉Vue、React等框架，有3年以上工作经验"
          },
          createTime: 1758958046556
        },
        {
          id: "695494127097217027",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971803632909803521",
          msgType: 12, // 语音消息
          content: {
            audioUrl: "https://example.com/audio1.mp3",
            duration: 15,
            isRead: false
          },
          createTime: 1758958106556
        },
        {
          id: "695494127097217028",
          sessionId: "1971803632909803521",
          senderId: "1971803632909803521", // 我发送的语音消息
          receiveId: "1957428994103259137",
          msgType: 12, // 语音消息
          content: {
            audioUrl: "https://example.com/audio2.mp3",
            duration: 8,
            isRead: true
          },
          createTime: 1758958166556
        },
        {
          id: "695494127097217029",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971803632909803521",
          msgType: 11, // 图片消息
          content: {
            imageUrl: "https://picsum.photos/400/300?random=1",
            width: 400,
            height: 300
          },
          createTime: 1758958226556
        },
        {
          id: "695494127097217030",
          sessionId: "1971803632909803521",
          senderId: "1971803632909803521", // 我发送的图片消息
          receiveId: "1957428994103259137",
          msgType: 11, // 图片消息
          content: {
            imageUrl: "https://picsum.photos/350/250?random=2",
            width: 350,
            height: 250
          },
          createTime: 1758958286556
        },
        {
          id: "695494127097217031",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971803632909803521",
          msgType: 11, // 图片消息
          content: {
            imageUrl: "https://picsum.photos/450/350?random=3",
            width: 450,
            height: 350
          },
          createTime: 1758958346556
        },
        {
          id: "695494127097217032",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137",
          receiveId: "1971803632909803521",
          msgType: 16, // 职位卡片消息
          content: {
            beginSalary: 1,
            city: "重庆",
            companyId: "1957432013796626434",
            companyName: "智鑫新能源",
            edu: "大专",
            endSalary: 2,
            expYears: "0-2年",
            face: "http://192.168.56.107:9000/jwcb-hire/user/73ea1e09-3fd7-4a66-9817-22dca26960d7.png",
            financStage: "自有资金",
            jobId: "J020",
            jobName: "行政专员",
            monthlySalary: 13,
            name: "魏灿斌",
            peopleSize: "counts500_999",
            position: "HR经理",
            tags: "行政,后勤,办公",
            userId: "1957428994103259137"
          },
          createTime: 1758958406556
        },
        {
          id: "695494127097217033",
          sessionId: "1971803632909803521",
          senderId: "1971803632909803521", // 我发送的简历消息
          receiveId: "1957428994103259137",
          msgType: 17, // 简历附件消息
          content: {
            id: 123,
            userId: "1971803632909803521",
            fileName: "张三_前端开发工程师_简历.pdf",
            fileSizeMb: 2.5,
            fileType: "pdf",
            fileUrl: "https://example.com/resume/zhangsan_resume.pdf"
          },
          createTime: 1758958466556
        },
        {
          id: "695494127097217034",
          sessionId: "1971803632909803521",
          senderId: "1971803632909803521", // 我发送的另一份简历
          receiveId: "1957428994103259137",
          msgType: 17, // 简历附件消息
          content: {
            id: 124,
            userId: "1971803632909803521",
            fileName: "个人作品集.docx",
            fileSizeMb: 5.2,
            fileType: "docx",
            fileUrl: "https://example.com/resume/portfolio.docx"
          },
          createTime: 1758958526556
        },
        {
          id: "695494127097217035",
          sessionId: "1971803632909803521",
          senderId: "1957428994103259137", // HR发送的面试邀请
          receiveId: "1971803632909803521",
          msgType: 14, // 面试邀请消息
          content: {
            interviewId: "1204361ad12b3519e3bfae0427bed53d"
          },
          createTime: 1758958586556
        }
      ],
      
      // 用户信息
      currentUserId: "", // 从userStore中获取
      
      // 表情列表
      emojiList: [
        "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣",
        "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "🥰",
        "😘", "😗", "😙", "😚", "😋", "😛", "😝", "😜",
        "🤪", "🤨", "🧐", "🤓", "😎", "🤩", "🥳", "😏"
      ]
    };
  },
  onLoad(options) {
    // Initialize chat store
    this.chatStore = useChatStore();
    
    // 注册发送语音的函数
    this.chatStore.registerSendVoiceEvent(({tempFilePath,duration}) => {
      console.log("chat page",tempFilePath,duration);
    })
    console.log("求职者聊天页面参数:", options);
    // 确保中文参数正确显示，如果需要可以进行解码
    this.chatUserName = decodeURIComponent(options.name || "HR");
    this.sessionId = options.sessionId || "";
    this.jobId = options.jobId || "";
    this.hrId = options.hrId || "";
    this.inputPlaceholder = `对${this.chatUserName}发送消息`;
    
    // 从本地存储获取当前用户ID
    try {
      const userInfo = uni.getStorageSync('userInfo');
      console.log("从本地存储获取的userInfo:", userInfo);
      
      if (userInfo && userInfo.id) {
        this.currentUserId = userInfo.id;
      } else {
        // 如果本地存储中没有用户信息，使用默认值用于测试
        this.currentUserId = "1971803632909803521";
      }
    } catch (error) {
      console.error("获取用户信息出错:", error);
      // 使用默认值用于测试
      this.currentUserId = "1971803632909803521";
    }
    
    console.log("当前用户ID:", this.currentUserId);
    
    // 如果有hrId和jobId但没有sessionId，创建会话
    if (this.hrId && this.jobId && !this.sessionId) {
      this.createChatSession();
    }
    
    // 滚动到底部
    this.$nextTick(() => {
      this.scrollToBottom();
    });
  },
  methods: {
    // 创建聊天会话
    async createChatSession() {
      if (!this.hrId || !this.jobId) {
        console.error("缺少hrId或jobId，无法创建会话");
        return;
      }
      
      try {
        console.log("开始创建聊天会话，hrId:", this.hrId, "jobId:", this.jobId);
        
        const response = await createCandidateChatSessionApi(this.hrId, this.jobId);
        
        console.log("聊天会话创建响应:", response);
        
        if (response && response.id) {
          this.sessionId = response.id;
          console.log("会话创建成功，sessionId:", this.sessionId);
        } else {
          console.error("会话创建失败，响应无效:", response);
        }
      } catch (error) {
        console.error("创建聊天会话出错:", error);
        uni.showToast({
          title: "创建聊天会话失败",
          icon: "none",
          duration: 2000
        });
      }
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 切换语音输入模式
    toggleVoiceInput() {
      this.isVoiceMode = !this.isVoiceMode;
      this.showEmojiPanel = false;
      this.showMorePanel = false;
    },
    
    // 切换表情面板
    toggleEmoji() {
      this.showEmojiPanel = !this.showEmojiPanel;
      this.showMorePanel = false;
      this.isVoiceMode = false;
    },
    
    // 显示更多面板
    showMore() {
      this.showMorePanel = !this.showMorePanel;
      this.showEmojiPanel = false;
      this.isVoiceMode = false;
    },
    
    // 输入框获得焦点
    onInputFocus() {
      this.showEmojiPanel = false;
      this.showMorePanel = false;
      // 延迟滚动，确保键盘弹出后再执行
      setTimeout(() => {
        this.scrollToBottom();
      }, 500);
    },
    
    // 输入框失去焦点
    onInputBlur() {
      // 可以在这里处理一些逻辑
    },
    
    // 判断是否为我发送的消息
    isMyMessage(message) {
      return message.senderId === this.currentUserId;
    },
    
    // 格式化消息时间
    formatMessageTime(timestamp) {
      const date = new Date(timestamp);
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    
    // 发送消息
    sendMessage() {
      if (!this.inputText.trim()) return;
      
      const message = {
        id: Date.now().toString(),
        sessionId: this.sessionId,
        senderId: this.currentUserId,
        receiveId: "", // 接收者ID，需要根据实际情况设置
        msgType: 10,
        content: {
          text: this.inputText.trim()
        },
        createTime: Date.now()
      };
      
      this.messageList.push(message);
      this.inputText = "";
      
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      // TODO: 发送消息到服务器
      console.log("发送消息:", message);
    },
    
    // 选择表情
    selectEmoji(emoji) {
      this.inputText += emoji;
    },
    
    // 开始录音
    startRecord(e) {
      this.isRecording = true;
      this.isRecordingCancel = false;
      this.recordingTime = 0;
      this.voiceButtonText = "松开 发送";
      this.recordStartY = e.touches[0].clientY;
      
      // 开始计时
      this.recordingTimer = setInterval(() => {
        this.recordingTime++;
      }, 1000);
      
      this.chatStore.recorder.start()
    },
    
    // 录音过程中手指移动
    onRecordMove(e) {
      if (!this.isRecording) return;
      
      const currentY = e.touches[0].clientY;
      const deltaY = this.recordStartY - currentY;
      
      // 上滑超过100rpx（约50px）则进入取消状态
      if (deltaY > 50) {
        if (!this.isRecordingCancel) {
          this.isRecordingCancel = true;
          this.voiceButtonText = "松开 取消";
          // 震动反馈
          uni.vibrateShort({
            type: 'light'
          });
        }
      } else {
        if (this.isRecordingCancel) {
          this.isRecordingCancel = false;
          this.voiceButtonText = "松开 发送";
        }
      }
    },
    
    // 结束录音
    endRecord() {
      // 清除计时器
      if (this.recordingTimer) {
        clearInterval(this.recordingTimer);
        this.recordingTimer = null;
      }
      
      if (this.isRecordingCancel) {
        // 取消发送
        console.log("取消录音");
        uni.showToast({
          title: '已取消',
          icon: 'none',
          duration: 1000
        });
      } else {
        // 发送录音
        console.log("发送录音，时长:", this.recordingTime + "秒");
        
        // 录音时长太短提示
        if (this.recordingTime < 1) {
          uni.showToast({
            title: '录音时间太短',
            icon: 'none',
            duration: 1500
          });
        } else {
          // TODO: 发送录音消息
          uni.showToast({
            title: '发送录音',
            icon: 'success',
            duration: 1000
          });
        }
      }
      
      // 重置状态
      this.isRecording = false;
      this.isRecordingCancel = false;
      this.recordingTime = 0;
      this.voiceButtonText = "按住 说话";
    },
    
    // 取消录音
    cancelRecord() {
      // 清除计时器
      if (this.recordingTimer) {
        clearInterval(this.recordingTimer);
        this.recordingTimer = null;
      }
      
      this.isRecording = false;
      this.isRecordingCancel = false;
      this.recordingTime = 0;
      this.voiceButtonText = "按住 说话";
      
      console.log("取消录音（touchcancel）");
      uni.showToast({
        title: '已取消',
        icon: 'none',
        duration: 1000
      });
    },
    
    // 选择图片
    selectImage() {
      this.showMorePanel = false;
      
      // 显示选择菜单
      uni.showActionSheet({
        itemList: ['从相册选择', '拍照'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 从相册选择
            this.chooseImageFromAlbum();
          } else if (res.tapIndex === 1) {
            // 拍照
            this.chooseImageFromCamera();
          }
        }
      });
    },
    
    // 从相册选择图片
    chooseImageFromAlbum() {
      uni.chooseImage({
        count: 9, // 最多选择9张
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          console.log('选择图片成功:', res);
          this.sendImages(res.tempFilePaths);
        },
        fail: (error) => {
          console.error('选择图片失败:', error);
          uni.showToast({
            title: '选择图片失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    
    // 拍照
    chooseImageFromCamera() {
      uni.chooseImage({
        count: 1, // 拍照只能一张
        sizeType: ['original', 'compressed'],
        sourceType: ['camera'],
        success: (res) => {
          console.log('拍照成功:', res);
          this.sendImages(res.tempFilePaths);
        },
        fail: (error) => {
          console.error('拍照失败:', error);
          uni.showToast({
            title: '拍照失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    
    // 发送图片消息
    sendImages(imagePaths) {
      if (!imagePaths || imagePaths.length === 0) return;
      
      // 限制最多9张图片
      const paths = imagePaths.slice(0, 9);
      
      paths.forEach((imagePath, index) => {
        // 获取图片信息
        uni.getImageInfo({
          src: imagePath,
          success: (imageInfo) => {
            // 创建图片消息
            const message = {
              id: (Date.now() + index).toString(),
              sessionId: this.sessionId,
              senderId: this.currentUserId,
              receiveId: this.hrId,
              msgType: 11, // 图片消息
              content: {
                imageUrl: imagePath,
                width: Math.min(imageInfo.width, 400), // 限制最大宽度
                height: Math.min(imageInfo.height, 300) // 限制最大高度
              },
              createTime: Date.now() + index
            };
            
            this.messageList.push(message);
            
            // 滚动到底部
            this.$nextTick(() => {
              this.scrollToBottom();
            });
            
            // TODO: 发送图片到服务器
            console.log("发送图片消息:", message);
          },
          fail: (error) => {
            console.error('获取图片信息失败:', error);
            uni.showToast({
              title: '图片处理失败',
              icon: 'none',
              duration: 2000
            });
          }
        });
      });
      
      // 显示发送成功提示
      uni.showToast({
        title: `已发送${paths.length}张图片`,
        icon: 'success',
        duration: 1500
      });
    },
    
    // 选择简历 - 求职者专用
    selectResume() {
      this.showMorePanel = false;
      // TODO: 选择简历逻辑
      console.log("选择简历");
    },
    
    // 滚动到底部（滚动到占位区域）
    scrollToBottom() {
      this.$nextTick(() => {
        // 使用scroll-into-view滚动到底部占位区域
        this.scrollIntoView = "message-bottom";
        // 同时设置scrollTop确保滚动
        this.scrollTop = 99999;
        // 清除scroll-into-view以便下次使用
        setTimeout(() => {
          this.scrollIntoView = "";
        }, 100);
      });
    },
    
    // 获取当前时间
    getCurrentTime() {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    
    // 预览图片
    previewImage(imageUrl) {
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl
      });
    },
    
    // 跳转到职位详情
    goToJobDetail(jobId) {
      console.log("跳转到职位详情，jobId:", jobId);
      uni.navigateTo({
        url: `/pages/candidate/position/positionDetail?jobId=${jobId}`,
      });
    },
    
    // 格式化薪资显示
    formatSalary(job) {
      if (job.beginSalary && job.endSalary) {
        return `${job.beginSalary}-${job.endSalary}K`;
      }
      return "面议";
    },
    
    // 格式化公司规模
    formatPeopleSize(peopleSize) {
      if (!peopleSize) return "";
      
      // 硬编码的映射（作为后备方案）
      const sizeMap = {
        counts0_50: "0-50人",
        counts50_100: "50-100人",
        counts100_500: "100-500人",
        counts500_999: "500-999人",
        counts1000_9999: "1000-9999人",
        counts10000: "10000人以上",
      };
      
      return sizeMap[peopleSize] || peopleSize;
    },
    
    // 获取前N个标签
    getTopTags(tags, count) {
      if (!tags) return [];
      const tagArray = tags.split(",");
      return tagArray.slice(0, count);
    },
    
    // 根据文件类型获取简历图标
    getResumeIcon(fileType) {
      const base = '/static/icons/candidate/';
      switch (fileType.toLowerCase()) {
        case 'pdf':
          return base + 'pdf.png';
        case 'doc':
          return base + 'doc.png';
        case 'docx':
          return base + 'docx.png';
        case 'png':
          return base + 'PNG.png';
        case 'jpg':
        case 'jpeg':
          return base + 'jpg.png';
        default:
          return base + 'file.png'; // 未知类型使用默认图标
      }
    },
    
    // 格式化简历文件大小
    formatResumeSize(sizeMb) {
      if (!sizeMb) return '0 MB';
      if (sizeMb < 1) {
        return (sizeMb * 1024).toFixed(0) + ' KB';
      }
      return sizeMb.toFixed(1) + ' MB';
    },
    
    // 预览简历文件
    previewResume(resumeContent) {
      console.log('点击预览简历:', resumeContent);
      
      if (!resumeContent || !resumeContent.fileUrl) {
        uni.showToast({
          title: "简历文件链接无效",
          icon: "none",
          duration: 2000
        });
        return;
      }

      const fileType = resumeContent.fileType.toLowerCase();
      const fileName = resumeContent.fileName;

      // 跳转到文件预览页面
      uni.navigateTo({
        url: `/pages/common/filePreview?fileUrl=${encodeURIComponent(resumeContent.fileUrl)}&fileName=${encodeURIComponent(fileName)}&fileType=${fileType}`
      });
    },
    
    // 查看面试详情
    viewInterviewDetail(interviewId) {
      console.log('查看面试详情，interviewId:', interviewId);
      uni.navigateTo({
        url: `/pages/candidate/interview/interviewDetail?interviewId=${interviewId}`
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f0f2f5;
}

/* Header样式 */
.chat-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* 消息区域 */
.message-area {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.message-list {
  min-height: 100%;
}

.message-item {
  margin-bottom: 30rpx;
}

.message-wrapper {
  display: flex;
  gap: 20rpx;
}

.message-right .message-wrapper {
  flex-direction: row-reverse;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.message-content {
  max-width: 60%;
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.message-right .message-content {
  align-items: flex-end;
}

.message-bubble {
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  margin-bottom: 8rpx;
  word-wrap: break-word;
  word-break: break-all;
}

.message-bubble-left {
  background-color: #ffffff;
  border-top-left-radius: 4rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.message-bubble-right {
  background-color: #00bdb4;
  border-top-right-radius: 4rpx;
}

.message-text {
  font-size: 32rpx;
  line-height: 1.4;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.message-bubble-right .message-text {
  color: #ffffff;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 图片消息样式 */
.image-message-wrapper {
  display: flex;
  align-items: flex-end;
  position: relative;
}

.image-message-wrapper-right {
  justify-content: flex-end;
}

.message-image {
  border-radius: 12rpx;
  max-width: 100%;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.message-image:active {
  opacity: 0.8;
}

/* 语音消息样式 */
.voice-message {
  min-width: 200rpx;
  max-width: 400rpx;
}

.voice-message-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8rpx;
  position: relative;
}

.voice-message-wrapper-right {
  flex-direction: row-reverse;
}

.voice-content {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 8rpx 0;
}

.voice-content-right {
  flex-direction: row-reverse;
}

.voice-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
}

.voice-duration {
  font-size: 28rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.message-bubble-right .voice-duration {
  color: #ffffff;
}

.unread-dot-outside {
  width: 16rpx;
  height: 16rpx;
  flex-shrink: 0;
  margin-bottom: 8rpx;
}

.message-placeholder {
  height: 100rpx;
}

/* 输入区域 */
.input-area {
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  padding: 20rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.input-wrapper {
  display: flex;
  align-items: center;
  gap: 20rpx;
  min-height: 80rpx;
}

.voice-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 40rpx;
}

.input-icon {
  width: 48rpx;
  height: 48rpx;
}

.text-input-wrapper {
  flex: 1;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 0 30rpx;
  min-height: 80rpx;
  display: flex;
  align-items: center;
}

.text-input {
  width: 100%;
  font-size: 32rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.input-placeholder {
  color: #999;
}

.voice-input-btn {
  flex: 1;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.voice-input-btn.recording {
  background-color: #e0e0e0;
}

.voice-text {
  font-size: 32rpx;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 录音遮罩层 */
.recording-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recording-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 80rpx;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 24rpx;
  transition: all 0.2s ease;
}

.recording-content.cancel-state {
  background-color: rgba(255, 71, 87, 0.9);
}

.recording-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.recording-icon {
  width: 60rpx;
  height: 60rpx;
}

.cancel-icon {
  width: 50rpx;
  height: 50rpx;
}

.recording-text {
  font-size: 28rpx;
  color: #ffffff;
  margin-bottom: 16rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.recording-time {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.right-buttons {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.emoji-btn,
.more-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 40rpx;
}

.send-btn {
  background-color: #00bdb4;
  border-radius: 40rpx;
  padding: 0 30rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 表情面板 */
.emoji-panel {
  margin-top: 20rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 30rpx;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20rpx;
}

.emoji-item {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 12rpx;
}

.emoji-text {
  font-size: 40rpx;
}

/* 更多面板 */
.more-panel {
  margin-top: 20rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 30rpx;
}

.more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx;
}

.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.more-icon {
  width: 60rpx;
  height: 60rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 10rpx;
}

.more-text {
  font-size: 24rpx;
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

uni-scroll-view{
  width: 95%;
}
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}
.message-right{
    justify-content: flex-end;
}

/* 职位卡片消息样式 */
.job-card-message-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 20rpx 0;
}

.job-card-tip {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 8rpx;
  text-align: center;
}

.job-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  width: 90%;
  max-width: 600rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.job-card:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.job-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  flex: 1;
  margin-right: 20rpx;
}

.job-salary {
  font-size: 30rpx;
  font-weight: 600;
  color: #00bdb4;
}

.company-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.company-name {
  font-size: 26rpx;
  color: #666666;
  margin-right: 8rpx;
}

.separator {
  font-size: 26rpx;
  color: #999999;
  margin: 0 8rpx;
}

.company-detail {
  font-size: 26rpx;
  color: #999999;
}

.job-nature {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.nature-tag {
  font-size: 24rpx;
  color: #666666;
  background-color: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.job-tag {
  font-size: 24rpx;
  color: #999999;
  background-color: #f5f5f5;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}

.job-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hr-info {
  display: flex;
  align-items: center;
}

.hr-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.hr-text {
  display: flex;
  align-items: center;
}

.hr-name {
  font-size: 26rpx;
  color: #999999;
}

.hr-position {
  font-size: 26rpx;
  color: #999999;
  margin-left: 4rpx;
}

.job-city {
  font-size: 26rpx;
  color: #999999;
}

/* 简历附件消息样式 */
.resume-message-wrapper {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-bottom: 8rpx;
}

.resume-message-wrapper-right {
  justify-content: flex-end;
}

.resume-attachment {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
  max-width: 400rpx;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.resume-message-wrapper-right .resume-attachment {
  background-color: #00bdb4;
}

.resume-attachment:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.resume-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.resume-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0; /* 确保文本可以被截断 */
}

.resume-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.resume-message-wrapper-right .resume-name {
  color: #ffffff;
}

.resume-size {
  font-size: 24rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.resume-message-wrapper-right .resume-size {
  color: rgba(255, 255, 255, 0.8);
}

/* 面试邀请消息样式 */
.interview-message-wrapper {
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-bottom: 8rpx;
}

.interview-message-wrapper-right {
  justify-content: flex-end;
}

.interview-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  max-width: 400rpx;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.interview-message-wrapper-right .interview-card {
  background-color: #00bdb4;
}

.interview-card:active {
  transform: scale(0.98);
  opacity: 0.8;
}

.interview-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.interview-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.interview-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.interview-message-wrapper-right .interview-title {
  color: #ffffff;
}

.interview-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.interview-message-wrapper-right .interview-desc {
  color: rgba(255, 255, 255, 0.9);
}

.interview-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-text {
  font-size: 26rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.interview-message-wrapper-right .action-text {
  color: rgba(255, 255, 255, 0.8);
}

.action-arrow {
  width: 20rpx;
  height: 20rpx;
  flex-shrink: 0;
}
</style>
